<template>
  <div class="flex_js p_0_20 bg_fff;height:32px" v-if="show_tabs">
    <div class="flex1" style="overflow: auto" @wheel="handleScroll($event)">
      <div class="flex">
        <div
          v-for="(item, index) in tabs_list"
          class="tab_item"
          style="height: 32px; cursor: pointer"
          :class="tabs_listValue == item.name ? 'choose_tab' : ''"
          @click.stop="selectTabs(item)"
        >
          <div class="flex p_0_15">
            <span style="white-space: nowrap">{{ item.label }}</span>
            <img
              v-show="item.name != 'function'"
              @click.stop="removeTab(item.name)"
              :src="item.close_icon"
              style="width: 12px; height: 12px; margin-left: 10px; border-radius: 50%"
              @mouseenter="change_tab_close_icon({ index: index, type: 1 })"
              @mouseleave="change_tab_close_icon({ index: index, type: 2 })"
              alt=""
            />
          </div>
          <div
            style="
              width: 1px;
              height: 15px;
              background-color: #d8d8d8;
              margin-right: -1px;
            "
            v-show="tabs_listValue != item.name"
          ></div>
        </div>
      </div>
    </div>
    <div class="flex p_left20">
      <el-dropdown>
        <svgBtn
          style="
            font-size: 14px !important;
            padding: 5px;
            margin: 0 5px;
            border-radius: 3px;
            height: 14px;
            line-height: 14px;
          "
          :style="{
            backgroundColor: svg_color_list[1] == '#3580eb' ? '#ECF4FF' : '',
          }"
          :color="svg_color_list[1]"
          @mouseenter="svg_color_list[1] = '#3580eb'"
          @mouseleave="svg_color_list[1] = '#999'"
          icon="select_tabs"
          @click="EventBus.emit('refresh')"
        ></svgBtn>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              @click="close_tab(1)"
              :style="{ color: close_status.close_1 ? '' : '#999' }"
            >
              <svgBtn
                icon="tabs_close_1"
                :color="close_status.close_1 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn>
              关闭标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(2)"
              :style="{ color: close_status.close_2 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_2"
                :color="close_status.close_2 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭左侧标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(3)"
              :style="{ color: close_status.close_3 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_3"
                :color="close_status.close_3 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭右侧标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(4)"
              :style="{ color: close_status.close_4 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_4"
                :color="close_status.close_4 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭其他标签页</el-dropdown-item
            >
            <el-dropdown-item
              @click="close_tab(5)"
              :style="{ color: close_status.close_5 ? '' : '#999' }"
              ><svgBtn
                icon="tabs_close_5"
                :color="close_status.close_5 ? '#999' : '#999'"
                style="font-size: 14px; margin-right: 10px"
              ></svgBtn
              >关闭全部标签页</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <svgBtn
        style="
          font-size: 14px !important;
          padding: 5px;
          margin: 0 5px;
          border-radius: 3px;
          height: 14px;
          line-height: 14px;
        "
        :style="{
          backgroundColor: svg_color_list[2] == '#3580eb' ? '#ECF4FF' : '',
        }"
        :color="svg_color_list[2]"
        @mouseenter="svg_color_list[2] = '#3580eb'"
        @mouseleave="svg_color_list[2] = '#999'"
        :icon="is_all_page ? 'page_mini_2' : 'page_large_2'"
        @click="store.commit('change_all_page')"
      ></svgBtn>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed, onMounted, onUnmounted } from "vue";
import svgBtn from "@/components/svg_button.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import EventBus from "@/utils/EventBus";
const svg_color_list = ref(["#999", "#999", "#999"]);
const store = useStore();
const router = useRouter();
const is_all_page = computed(() => {
  return store.state.is_all_page;
});
// sheet页x轴滚动计算
const handleScroll = (e) => {
  // e.wheelDelta或者e.detail判断滚轮方向
  const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
  // 控制左右滚动的距离
  e.currentTarget.scrollLeft -= delta * 100;
  e.preventDefault;
};
const tabs_listValue = ref("function"); // 第一个子页面   运行环境
const tab_close_src_1 = require("@/assets/img/tabs_close_1.png");
const tab_close_src_2 = require("@/assets/img/tabs_close_2.png");
const tabs_list = computed(() => {
  let list = store.state.tabs_list ? store.state.tabs_list : [];
  list.forEach((element) => {
    element.close_icon = tab_close_src_1;
  });
  return list;
});
const close_status = ref({
  close_1: false,
  close_2: false,
  close_3: false,
  close_4: false,
  close_5: false,
});
const show_tabs = computed(() => {
  return store.state.hidden_tabs;
});
console.log(tabs_list.value);
watch(tabs_list.value, () => {
  close_status.value.close_1 = false;
  close_status.value.close_2 = false;
  close_status.value.close_3 = false;
  close_status.value.close_4 = false;
  close_status.value.close_5 = false;

  if (tabs_list.value.length > 1) {
    close_status.value.close_1 = true;
    close_status.value.close_5 = true;
  }
  if (tabs_list.value.length > 2) {
    close_status.value.close_4 = true;
  }
  tabs_list.value.some((e, index) => {
    if (e.is_active) {
      tabs_listValue.value = e.name;
      if (index > 1) {
        close_status.value.close_2 = true;
      }
      if (index < tabs_list.value.length - 1) {
        close_status.value.close_3 = true;
      }
    }
  });
});
onMounted(() => {
  EventBus.on("close_tab", (e) => {
    close_status.value.close_5 = true;
    close_tab(e);
  });
});
onUnmounted(() => {
  EventBus.off("close_tab");
});
const close_tab = (e) => {
  console.log(e);
  if (e == 1) {
    if (!close_status.value.close_1) {
      return;
    }
    console.log(tabs_list.value);
    tabs_list.value.some((item) => {
      if (item.is_active) {
        removeTab(item.name);
      }
    });
  } else if (e == 2) {
    if (!close_status.value.close_2) {
      return;
    }
    tabs_list.value.some((item, index) => {
      if (item.is_active) {
        store.commit("remove_tabs_list", {
          index: 1,
          length: index - 1,
          close_self: false,
        });
        EventBus.emit("remove_tabs", { index: 1, length: index - 1 });
      }
    });
  } else if (e == 3) {
    if (!close_status.value.close_3) {
      return;
    }
    tabs_list.value.some((item, index) => {
      if (item.is_active) {
        store.commit("remove_tabs_list", {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
          close_self: false,
        });
        EventBus.emit("remove_tabs", {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
        });
      }
    });
  } else if (e == 4) {
    if (!close_status.value.close_4) {
      return;
    }
    tabs_list.value.some((item, index) => {
      if (item.is_active) {
        store.commit("remove_tabs_list", {
          index: 1,
          length: index - 1,
          close_self: false,
        });
        store.commit("remove_tabs_list", {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
        });
        EventBus.emit("remove_tabs", {
          index: index + 1,
          length: tabs_list.value.length - 1 - index,
        });
        EventBus.emit("remove_tabs", { index: 1, length: index - 1 });
      }
    });
  } else {
    if (!close_status.value.close_5) {
      return;
    }
    store.commit("remove_tabs_list", {
      index: 1,
      length: tabs_list.value.length - 1,
      close_self: true,
    });
    EventBus.emit("remove_tabs", {
      index: 1,
      length: tabs_list.value.length - 1,
    });
    EventBus.emit("menu_value", { index: 0, type: 2 });
    router.push({ name: "function" });
    EventBus.emit("change_default_active", "/function");
  }
};
const removeTab = async (e) => {
  console.log(e);
  if (tabs_list.value.length == 1) {
    return;
  }
  await remove_first(e);
  tabs_list.value.some((item, index) => {
    if (item.name == e) {
      console.log(tabs_list.value, index);
      store.commit("remove_tabs_list", {
        index: index,
        length: 1,
        close_self: true,
      });
    }
  });
};
const remove_first = (e) => {
  tabs_list.value.some((item, index) => {
    if (item.name == e) {
      if (item.is_active) {
        router.replace({ name: tabs_list.value[index - 1].name });
        EventBus.emit("menu_value", {
          index: tabs_list.value[index - 1].path,
        });
        EventBus.emit("remove_tabs", { index: index, length: 1 });
      }
    }
  });
};
const selectTabs = (e) => {
  console.log(e, tabs_list.value);
  router.replace({ name: e.name });
  tabs_list.value.forEach((item) => {
    if (item.name == e.name) {
      EventBus.emit("menu_value", { index: e.path });
    }
  });
};
const change_tab_close_icon = (e) => {
  e.type == 1
    ? (tabs_list.value[e.index].close_icon = tab_close_src_2)
    : (tabs_list.value[e.index].close_icon = tab_close_src_1);
};
</script>

<style lang="scss" scoped>
.tab_item {
  display: flex;
  align-items: center;
}
.tab_item:hover {
  color: #3580eb;
}
.choose_tab {
  background-color: #f0f2f5;
  font-weight: bold;
  color: #3580eb;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none;
}
:deep(.el-tabs__item) {
  font-size: 12px;
  text-align: center;
}
:deep(.el-tabs .el-tabs__item:first-child .is-icon-close) {
  display: none;
}
:deep(.el-tabs--card > .el-tabs__header) {
  border: none;
}
</style>
